<template>
  <el-card style="margin: 50px 100px" body-style="{padding:20px}">
    <div slot="header">
      <span style="margin-right: 36px">设备详情</span>
      <el-tag v-if="deviceInfo.ins_online" type="success">正常运行</el-tag>
      <el-tag v-else-if="deviceInfo.ins_online" type="info">离线</el-tag>
      <el-tag v-else type="warning">异常</el-tag>
      <el-button style="float: right; padding: 3px 0" type="text">设备控制</el-button>
    </div>
    <el-row>
      <el-col :span="11">
        <el-divider>设备基本信息</el-divider>
        <el-card>
          <el-form class="info" :model="deviceInfo" label-position="top" inline>
            <el-form-item label="设备名称">
              <el-input v-model="deviceInfo.ins_commercial.ci_info.i_c_name" readonly></el-input>
            </el-form-item>
            <el-form-item label="设备序列号">
              <el-input v-model="deviceInfo.ins_commercial.ci_sn" readonly></el-input>
            </el-form-item>
            <el-form-item label="设备型号">
              <el-input v-model="deviceInfo.ins_commercial.ci_info.i_model" readonly></el-input>
            </el-form-item>
            <el-form-item label="设备类型">
              <el-input v-model="deviceInfo.ins_commercial.ci_info.i_class" readonly></el-input>
            </el-form-item>
            <el-form-item label="设备安装时间">
              <el-input v-model="deviceInfo.ins_date" readonly></el-input>
            </el-form-item>
            <el-form-item label="维护周期">
              <el-input v-model=deviceInfo.ins_mperiod readonly></el-input>
            </el-form-item>
            <el-form-item label="负责人">
              <el-input v-model=deviceInfo.ins_admin readonly></el-input>
            </el-form-item>
            <!--          <el-form-item label="工作状态">-->
            <!--          </el-form-item>-->
            <el-form-item label="设备所在区域">
              <el-input v-model="deviceInfo.ins_region" readonly>
                <el-button slot="append" icon="el-icon-map-location"></el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </el-card>
        <el-divider>最新监测数据</el-divider>
        <el-row style="margin-text-outline: 100px;">
          <el-col v-for="(data,index) of lastestData" :key="index" :span="8">
            <el-card>
              <div slot="header">
                <span style="margin-right: 20px">{{ data.sta_parameter.p_c_name }}</span>
                <el-tag v-if="data.sta_abnormal===0" type="success">正常</el-tag>
                <el-tag v-else type="warning">异常</el-tag>
                <el-button style="float: right; padding: 3px 0" type="text">管理</el-button>
              </div>
              <div style="text-align: center">
                <span
                    style="font-size: 36px;color: #9588e3;margin:20px 20px">{{
                    data.sta_value / Math.pow(10, data.sta_parameter.p_dotindex)
                  }}</span><span>{{ data.sta_parameter.p_e_unit }}</span>
                <p></p>
                <time class="time">{{ data.sta_time }}</time>
              </div>
            </el-card>
            .
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="11" :offset="2">
        <el-divider>历史观测数据</el-divider>
        <el-row>
          <el-table :data="records" border highlight-current-row :row-class-name="tableRowClassName"
                    :default-sort="{prop: 'sta_time', order: 'descending'}" size="mini"
                    :header-cell-style="{'font-size':'14px','font-weight':'bold'}">
            <el-table-column label="名称" fixed prop="p_c_name"></el-table-column>
            <el-table-column label="测量值" fixed prop="sta_value"></el-table-column>
            <el-table-column label="单位" prop="p_e_unit"></el-table-column>
            <el-table-column label="含义" prop="p_desc"></el-table-column>
            <el-table-column label="测量时间" prop="sta_time" sortable></el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[10, 15, 20]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
          <el-divider>历史信息</el-divider>
          <el-card class="infoCard">
            <ul style="color: #7abef1;font-size: 20px;">
              <li>报警信息</li>
              <li>报警值</li>
              <li>报警时间</li>
            </ul>
            <vue-seamless-scroll :data="warnings" class="seamless-warp" :class-option="classOption">
              <ul v-for="(item,index) in warnings" :key="index" style="color:#f6b18c;">
                <li v-text="item.hc_warninfo">
                </li>
                <li v-text="item.hc_value+''+item.hc_e_unit">
                </li>
                <li v-text="item.hc_warntime">
                </li>
              </ul>
            </vue-seamless-scroll>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "deviceInfo",
  components: {
    vueSeamlessScroll
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    const {loadData} = this
    const {loadStatistics} = this
    loadData()
    loadStatistics()
    setInterval(loadData,30000)
  },
  data() {
    return {
      // 请求数据
      queryInfo: {
        query: "",
        pageNum: 1,
        pageSize: 10
      },
      deviceInfo: {},
      records: [],
      warnings: [],
      lastestData: []
    }
  },
  methods: {
    async loadData() {
      const id = 1;
      const {data: res} = await this.$http.get('iotweb/device/?sta_install_id=' + id)
      this.deviceInfo = res.deviceInfo
      this.lastestData = res.lastestData
      this.warnings = res.warnings
      // console.log(res)
    },
    async loadStatistics() {
      const id = 1;
      this.queryInfo.sta_install_id = id
      let params = this.queryInfo
      const {data: res} = await this.$http.get('iotweb/statistics/', {params: params})

      this.records = []
      let that = this
      res.results.forEach(function (item, index) {
            let temp = {
              p_c_name: item.sta_parameter.p_c_name,
              p_e_unit: item.sta_parameter.p_e_unit,
              p_desc: item.sta_parameter.p_desc,
              sta_value: item.sta_value,
              sta_time: item.sta_time
            }
            that.records.push(temp)
          }
      )
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.loadStatistics()
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.loadStatistics()
    },
    tableRowClassName({row, rowIndex}) {
      if (!row.running) {
        return 'warning-row';
      }
    },
  }
}
</script>

<style lang="less">
.el-table .warning-row {
  background: #fce3b6;
}

//.info >>> .el-input__inner {
//  border-color: #dbbbbb;
//}

.time {
  font-size: 13px;
  color: #999;
}

.seamless-warp {
  width: 100%;
  height: calc(100% - 16px);
  overflow: hidden;
}

.infoCard {
  background: #666666;

  ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 20px;
  }

  li {
    line-height: 30px;
    width: 33.3%;
    text-align: center;
    float: left;
  }
}

</style>